<template>
	<div class="login_form">
		<el-form ref="form" :model="form" label-width="80px" :rules="rules" status-icon>
			<el-form-item label="请输入用户名" prop="username">
				<el-input v-model="form.username"></el-input>
			</el-form-item>

			<el-form-item label="请输入密码" prop='password'>
				<el-input type="password" v-model="form.password"></el-input>
			</el-form-item>

			<el-form-item>
				<div style="margin-top: 20px;">
					<el-button type="primary" @click="onSubmit('form')">登录</el-button>
					<el-button @click="loginClose">取消</el-button>
				</div>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	var _self
	export default {
		name: "logibForm",
		data() {
			return {
				form: {
					username: '',
					password: ''
				},
				rules: {
					username: [{
							required: true, //是否必填
							message: '用户名不能为空', //规则提示
							trigger: 'blur' //何事件触发
						},
						{
							pattern: /^[a-zA-Z0-9_-]{4,16}$/, //正则
							message: '用户名，4到16位（字母，数字，下划线，减号）'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,30}$/,
							message: '密码为数字，小写字母，大写字母，特殊符号 至少包含三种，长度为 8 - 30位'
						}
					]
				}
			}
		},
		methods: {
			//登录按钮
			onSubmit(form) {
				_self.$refs[form].validate((valid) => {
					if(valid) {
						alert('登陆成功');
						this.$axios.post('/api/login', {
							username: _self.form.username,
							password: _self.form.password
						}).then(res => {
							_self.username = res.data.username
							window.localStorage.setItem('username', JSON.stringify(res.data.username));
							_self.$emit('close-btn')
							//_self.closeDialog('isShowLogDialog')

						}, (err) => {
							console.log(err)
						});
					} else {
						console.log('登录失败   error submit!!');
						return false;
					}
				});
			},
			loginClose(){
				_self.$emit('close-btn')
			}
		},
		mounted: function() {
			_self = this
		}
	}
</script>

<style scoped="scoped">

</style>